<template>
	<div class="newsListWrap">
		<!-- <p>新闻列表的内容</p> -->
		<!-- 表单头 -->
		<div class="head">
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item>
					<el-input v-model="formInline.user" placeholder="请输入搜索内容"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
					<el-button type="success" @click="addShowBox" icon="el-icon-plus">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- 表格 -->
		<div class="center">
			<template>
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column prop="title" label="标题">
					</el-table-column>
					<el-table-column prop="author" label="作者">
					</el-table-column>
					<el-table-column prop="time" label="时间">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 分页 -->
		<div class="foot">
			<el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="limit" @current-change="currentPage">
			</el-pagination>
		</div>
		<!-- 弹框 -->
		<div class="dialog">
			<el-dialog title="添加新闻" :visible.sync="dialogVisible" width="80%" top="10px">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-form-item label="新闻标题" prop="title">
						<el-input v-model="form.title"></el-input>
					</el-form-item>
					<el-form-item label="新闻作者" prop="author">
						<el-input v-model="form.author"></el-input>
					</el-form-item>
					<el-form-item label="发布时间">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.time" style="width: 100%"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="是否上架">
						<el-switch v-model="form.isOnline" active-value="1" inactive-value="0"></el-switch>
					</el-form-item>

					<!-- <el-form-item label="新闻内容">
						<el-input type="textarea" v-model="form.desc"></el-input>
					</el-form-item> -->
					<!-- bidirectional data binding（双向数据绑定） -->
					<quill-editor class="editor" v-model="form.content" ref="myQuillEditor" @blur="onEditorBlur"
						@focus="onEditorFocus" @ready="onEditorReady">
					</quill-editor>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addnewsSubmit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>

</template>

<script>
	// import network from '@/network'
	import {
		addnewsApi,
		newsListApi,
		deletenewsApi
	} from '@/api/news.js'
	export default {
		name: 'newsList',
		data() {
			return {
				// 顶层搜索表单
				formInline: {
					user: '',
					region: ''
				},
				// 表格数据
				tableData: [{
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}, {
					title: '民航局：深刻反思“3·21”',
					author: '中国青年网',
					time: '2022-04-07'
				}],
				// 最大页数
				totalPage: 0,
				// 第几页
				page: 1,
				// 每页数量
				limit: 3,
				// 弹窗表单数据
				form: {
					title: '',
					author: '',
					time: '',
					isOnline: "1",
					content: ''
				},
				// 表单是否隐藏
				dialogVisible: false,
				// 表单验证的规则表
				rules: {
					title: [{
							required: true,
							message: '请输入标题',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 20,
							message: '长度在 1 到 20 个字符',
							trigger: 'blur'
						}
					],
					author: [{
							required: true,
							message: '请输入作者名',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 5,
							message: '长度在 1 到 5 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},

		methods: {
			// 分页查询所有新闻列表
			async showNewsList() {
				let res = await newsListApi({
					params: {
						page: this.page,
						limit: this.limit
					}
				});
				console.log(res)
				this.tableData = res.data;
				this.totalPage = res.count;
				console.log(this.totalPage)
			},
			currentPage(page){
				console.log(page)
				this.page = page;
				this.showNewsList()
			},
			// 添加新闻
			addnewsSubmit() {
				console.log(this.form);
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						// alert('submit!');
						let res = await addnewsApi({
							data: this.form
						});
						if (res.code == 200) {
							this.$message({
								message: "添加新闻成功！",
								type: "success",
							});
							this.dialogVisible = false;
						} else {
							this.$message.error("添加错误，请重新添加！");
						}
					} else {
						// console.log('error submit!!');
						this.$message.error("信息未填完，请重新添加！");
						return false;
					}
				});
			},
			onSubmit() {
				console.log('submit!');
			},
			// 打开添加新闻弹窗
			addShowBox() {
				this.form = {
					title: "",
					author: "",
					time: "",
					isOnline: "1",
					content: "",
				};
				this.dialogVisible = true;
			},
			onEditorBlur() {
				console.log('blur', this.messages)
			},

			onEditorFocus() {
				console.log('focus', this.messages)
			},

			onEditorReady() {
				console.log('ready', this.messages)
			},
			// 打开编辑新闻
			handleEdit(index, row){
				let id = row.id;
				this.form = row;
				this.dialogVisible = true;
			},
			// 删除新闻
			async handleDelete(index, row){
				let id = row.id;
				let isdel = confirm('确认删除么');
				if(isdel){
					let res = await deletenewsApi(id);
					console.log(240, res)
					if(res.code == 200){
						this.$message({
							message: "删除新闻成功！",
							type: "success",
						});
						// 刷新页面
						this.showNewsList();
					}else{
						this.$message.error('删除失败')
					}
				}
			}
		},
		mounted() {
			this.showNewsList();
			// let res = await newsListApi();
			// console.log(res)
		},
	};
</script>

<style lang="scss" scoped>
	.newsListWrap {
		padding: 30px;

		.foot {
			margin-top: 20px;
		}
	}
</style>
